<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-security-policy">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-tap-highlight" content="no" >
    <title>能量逗</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" type="text/css" href="css/framework7.ios.min.css">
    <link rel="stylesheet" type="text/css" href="css/framework7.ios.colors.min.css">
    <link rel="stylesheet" type="text/css" href="css/framework7-icons.css">
    <link rel="stylesheet" type="text/css" href="css/hardfun.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <!--<div class="navbar">-->
          <!--<div class="navbar-inner">-->
          <!--</div>-->
        <!--</div>-->
        <div class="pages navbar-through" style="background: transparent;">
            <div data-page="hardfunPre" class="page no-navbar" id="hardfunPre" style="background:transparent;">
                <!-- Scrollable page content -->
                <div class="page-content">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slide0" data-index="0"></div>
                            <div class="swiper-slide slide1" data-index="1"></div>
                            <div class="swiper-slide slide2" data-index="2"></div>
                            <div class="swiper-slide slide3" data-index="3"></div>
                            <div class="swiper-slide slide4" data-index="4"></div>
                            <div class="swiper-slide slide5" data-index="5"></div>
                            <div class="swiper-slide slide6" data-index="6"></div>
                            <div class="swiper-slide slide7" data-index="7"></div>
                            <div class="swiper-slide slide8" data-index="8"></div>
                            <div class="swiper-slide slide9" data-index="9"></div>
                            <div class="swiper-slide slide10" data-index="10"></div>
                            <div class="swiper-slide slide11" data-index="11"></div>
                            <div class="swiper-slide slide12" data-index="12"></div>
                            <div class="swiper-slide slide13" data-index="13"></div>
                            <div class="swiper-slide slide14" data-index="14"></div>

                        </div>
                        <!-- Add Pagination -->
                        <!--<div class="swiper-pagination"></div>-->
                    </div>
                    <div class="detail-container">
                        <div class="game_txt"></div>
                        <div class="game_video" id="video-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="gamePreText" type="text/template">
    <p class="head-title">
        {{title}}
    </p>
    <p>{{pre}}</p>
    <p>
        <span class="title">[能力直击]</span>
        <span class="content">{{ability}}</span>
    </p>
    <p><span class="title">[游戏人数]</span>
        <span class="content">{{person}}</span>
    </p>
    <p><span class="title">[适合年龄]</span>
        <span class="content">{{age}}</span>
    </p>
    <span class="head-title">[规则简介]</span>
    <p>
        <span class="content">{{rule}}</span>
    </p>
</script>

<script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" type="text/javascript" ></script>
<script type="text/javascript" src="js/framework7.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript">
    //初始化View背景
    $$('.view-main').css({
        'background':'url('+base_url+'img/games_pre_bg.png) repeat-y',
        'background-size':'100% auto'
    });
    //Swiper Image
    $$('#hardfunPre .swiper-slide').each(function () {
        var i = parseInt($$(this).data('index'));
        var url = 'url('+games[i].img+')';
        $$(this).css({'background-image':url});
    });

    //初始化Swiper
    var swiper = myApp.swiper('.swiper-container', {
        initialSlide: 1,
        effect: 'coverflow',
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflow: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
        }
    });

    //初始化game text，从第二个游戏开始
    var html_origin = myApp.gamePreTextTemplate(games[1]);
    $$('#hardfunPre .game_txt').html(html_origin);

    //初始化视频播放器，从第二个游戏开始
    var video = new tvp.VideoInfo();
    video.setVid(games[1].vid);
    var player =new tvp.Player();
    player.create({
        width:320,
        height:240,
        video:video,
        modId:"video-container"
    });

    //swipe响应
    swiper.on('onTransitionEnd',function(s){
        var cur = parseInt(s.activeIndex);
        var html = myApp.gamePreTextTemplate(games[cur]);
        $$('#hardfunPre .game_txt').html(html);

        //player.pause();
        video.setVid(games[cur].vid);
        player = new tvp.Player();
        player.create({
            width:320,
            height:240,
            video:video,
            modId:"video-container"
        });
    });
</script>
</body>
</html>